import * as echarts from 'echarts'

export const MAX = [93, 93, 93, 93]
export const VALUE = [84, 86, 75, 75]
export const itemStyle = {
  color: new echarts.graphic.LinearGradient(1, 0, 0, 1, [
    { offset: 0, color: '#83bff6' },
    { offset: 1, color: '#188df0' }
  ])
}
const CubeLeft = echarts.graphic.extendShape({
  shape: {
    x: 0,
    y: 0
  },
  buildPath: function(ctx, shape) {
    const xAxisPoint = shape.xAxisPoint
    const c0 = [shape.x, shape.y]
    const c1 = [shape.x - 9, shape.y - 9]
    const c2 = [xAxisPoint[0] - 9, xAxisPoint[1] - 9]
    const c3 = [xAxisPoint[0], xAxisPoint[1]]
    ctx
      .moveTo(c0[0], c0[1])
      .lineTo(c1[0], c1[1])
      .lineTo(c2[0], c2[1])
      .lineTo(c3[0], c3[1])
      .closePath()
  }
})
const CubeRight = echarts.graphic.extendShape({
  shape: {
    x: 0,
    y: 0
  },
  buildPath: function(ctx, shape) {
    const xAxisPoint = shape.xAxisPoint
    const c1 = [shape.x, shape.y]
    const c2 = [xAxisPoint[0], xAxisPoint[1]]
    const c3 = [xAxisPoint[0] + 18, xAxisPoint[1] - 9]
    const c4 = [shape.x + 18, shape.y - 9]
    ctx
      .moveTo(c1[0], c1[1])
      .lineTo(c2[0], c2[1])
      .lineTo(c3[0], c3[1])
      .lineTo(c4[0], c4[1])
      .closePath()
  }
})
const CubeTop = echarts.graphic.extendShape({
  shape: {
    x: 0,
    y: 0
  },
  buildPath: function(ctx, shape) {
    const c1 = [shape.x, shape.y]
    const c2 = [shape.x + 18, shape.y - 9]
    const c3 = [shape.x + 9, shape.y - 18]
    const c4 = [shape.x - 9, shape.y - 9]
    ctx
      .moveTo(c1[0], c1[1])
      .lineTo(c2[0], c2[1])
      .lineTo(c3[0], c3[1])
      .lineTo(c4[0], c4[1])
      .closePath()
  }
})
echarts.graphic.registerShape('CubeLeft', CubeLeft)
echarts.graphic.registerShape('CubeRight', CubeRight)
echarts.graphic.registerShape('CubeTop', CubeTop)
// 模型精度柱状图——热轧
export const barOption1 = {
  title: {
    text: '检测量 0 卷',
    textStyle: {
      fontSize: '15px'
    }
  },
  legend: {
    top: 20
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      // 坐标轴指示器，坐标轴触发有效
      type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
    }
  },
  grid: [
    {
      left: 0,
      right: 20,
      top: 30,
      bottom: 0,
      containLabel: true
    }
  ],
  xAxis: [
    {
      type: 'category',
      splitLine: {
        // 网格线
        show: false
      },
      data: ['屈服', '抗拉', '延伸', '冲击'],
      axisLabel: {
        fontSize: 14,
        interval: 0
      }
    }
  ],
  yAxis: [
    {
      splitLine: {
        // 网格线
        show: false
      },
      type: 'value'
    }
  ],
  series: [
    {
      type: 'custom',
      renderItem: function(params, api) {
        const location = api.coord([api.value(0), api.value(1)])
        return {
          type: 'group',
          children: [
            {
              type: 'CubeLeft',
              shape: {
                api,
                xValue: api.value(0),
                yValue: api.value(1),
                x: location[0],
                y: location[1],
                xAxisPoint: api.coord([api.value(0), 0])
              },
              style: {
                fill: 'rgba(7,29,97,.6)'
              }
            },
            {
              type: 'CubeRight',
              shape: {
                api,
                xValue: api.value(0),
                yValue: api.value(1),
                x: location[0],
                y: location[1],
                xAxisPoint: api.coord([api.value(0), 0])
              },
              style: {
                fill: 'rgba(10,35,108,.7)'
              }
            },
            {
              type: 'CubeTop',
              shape: {
                api,
                xValue: api.value(0),
                yValue: api.value(1),
                x: location[0],
                y: location[1],
                xAxisPoint: api.coord([api.value(0), 0])
              },
              style: {
                fill: 'rgba(11,42,106,.8)'
              }
            }
          ]
        }
      },
      data: MAX
    },
    {
      type: 'custom',
      renderItem: (params, api) => {
        const location = api.coord([api.value(0), api.value(1)])
        return {
          type: 'group',
          children: [
            {
              type: 'CubeLeft',
              shape: {
                api,
                xValue: api.value(0),
                yValue: api.value(1),
                x: location[0],
                y: location[1],
                xAxisPoint: api.coord([api.value(0), 0])
              },
              style: {
                fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: '#3B80E2'
                  },
                  {
                    offset: 1,
                    color: '#49BEE5'
                  }
                ])
              }
            },
            {
              type: 'CubeRight',
              shape: {
                api,
                xValue: api.value(0),
                yValue: api.value(1),
                x: location[0],
                y: location[1],
                xAxisPoint: api.coord([api.value(0), 0])
              },
              style: {
                fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: '#3B80E2'
                  },
                  {
                    offset: 1,
                    color: '#49BEE5'
                  }
                ])
              }
            },
            {
              type: 'CubeTop',
              shape: {
                api,
                xValue: api.value(0),
                yValue: api.value(1),
                x: location[0],
                y: location[1],
                xAxisPoint: api.coord([api.value(0), 0])
              },
              style: {
                fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: '#3B80E2'
                  },
                  {
                    offset: 1,
                    color: '#49BEE5'
                  }
                ])
              }
            }
          ]
        }
      },
      data: VALUE
    },
    {
      type: 'bar',
      label: {
        show: true,
        position: 'inside',
        fontSize: 15,
        offset: [30, 7]
      },
      itemStyle: {
        color: 'transparent'
      },
      barWidth: 0,
      data: VALUE
    },
    {
      type: 'bar',
      label: {
        show: true,
        position: 'top',
        fontSize: 15,
        offset: [-15, -7]
      },
      itemStyle: {
        color: 'transparent'
      },
      barWidth: 0,
      data: MAX
    }
  ]
}
// 模型精度柱状图——连退
export const barOption2 = {
  title: {
    text: '检测量 0 卷',
    textStyle: {
      fontSize: '15px'
    }
  },
  legend: {
    top: 20
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      // 坐标轴指示器，坐标轴触发有效
      type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
    }
  },
  grid: [
    {
      left: 0,
      right: 20,
      top: 30,
      bottom: 0,
      containLabel: true
    }
  ],
  xAxis: [
    {
      type: 'category',
      splitLine: {
        // 网格线
        show: false
      },
      data: ['屈服', '抗拉', '延伸', 'r值', 'n值'],
      axisLabel: {
        fontSize: 14,
        interval: 0
      }
    }
  ],
  yAxis: [
    {
      splitLine: {
        // 网格线
        show: false
      },
      type: 'value'
    }
  ],
  series: [
    {
      type: 'custom',
      renderItem: function(params, api) {
        const location = api.coord([api.value(0), api.value(1)])
        return {
          type: 'group',
          children: [
            {
              type: 'CubeLeft',
              shape: {
                api,
                xValue: api.value(0),
                yValue: api.value(1),
                x: location[0],
                y: location[1],
                xAxisPoint: api.coord([api.value(0), 0])
              },
              style: {
                fill: 'rgba(7,29,97,.6)'
              }
            },
            {
              type: 'CubeRight',
              shape: {
                api,
                xValue: api.value(0),
                yValue: api.value(1),
                x: location[0],
                y: location[1],
                xAxisPoint: api.coord([api.value(0), 0])
              },
              style: {
                fill: 'rgba(10,35,108,.7)'
              }
            },
            {
              type: 'CubeTop',
              shape: {
                api,
                xValue: api.value(0),
                yValue: api.value(1),
                x: location[0],
                y: location[1],
                xAxisPoint: api.coord([api.value(0), 0])
              },
              style: {
                fill: 'rgba(11,42,106,.8)'
              }
            }
          ]
        }
      },
      data: MAX
    },
    {
      type: 'custom',
      renderItem: (params, api) => {
        const location = api.coord([api.value(0), api.value(1)])
        return {
          type: 'group',
          children: [
            {
              type: 'CubeLeft',
              shape: {
                api,
                xValue: api.value(0),
                yValue: api.value(1),
                x: location[0],
                y: location[1],
                xAxisPoint: api.coord([api.value(0), 0])
              },
              style: {
                fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: '#3B80E2'
                  },
                  {
                    offset: 1,
                    color: '#49BEE5'
                  }
                ])
              }
            },
            {
              type: 'CubeRight',
              shape: {
                api,
                xValue: api.value(0),
                yValue: api.value(1),
                x: location[0],
                y: location[1],
                xAxisPoint: api.coord([api.value(0), 0])
              },
              style: {
                fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: '#3B80E2'
                  },
                  {
                    offset: 1,
                    color: '#49BEE5'
                  }
                ])
              }
            },
            {
              type: 'CubeTop',
              shape: {
                api,
                xValue: api.value(0),
                yValue: api.value(1),
                x: location[0],
                y: location[1],
                xAxisPoint: api.coord([api.value(0), 0])
              },
              style: {
                fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: '#3B80E2'
                  },
                  {
                    offset: 1,
                    color: '#49BEE5'
                  }
                ])
              }
            }
          ]
        }
      },
      data: VALUE
    },
    {
      type: 'bar',
      label: {
        show: true,
        position: 'inside',
        fontSize: 15,
        offset: [30, 7]
      },
      itemStyle: {
        color: 'transparent'
      },
      barWidth: 0,
      data: VALUE
    },
    {
      type: 'bar',
      label: {
        show: true,
        position: 'top',
        fontSize: 15,
        offset: [-15, -7]
      },
      itemStyle: {
        color: 'transparent'
      },
      barWidth: 0,
      data: MAX
    }
  ]
}
// 时间快捷键
export const pickerOptions = {
  shortcuts: [
    {
      text: '最近一周',
      onClick(picker) {
        const end = new Date()
        const start = new Date()
        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
        picker.$emit('pick', [start, end])
      }
    },
    {
      text: '最近一个月',
      onClick(picker) {
        const end = new Date()
        const start = new Date()
        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
        picker.$emit('pick', [start, end])
      }
    },
    {
      text: '最近三个月',
      onClick(picker) {
        const end = new Date()
        const start = new Date()
        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
        picker.$emit('pick', [start, end])
      }
    }
  ]
}
// 误差分析
export const anomalAnalysis = {
  tooltip: {
    trigger: 'axis',
    confine: true,
    formatter: function(parm) {
      const text =
        parm[0].name +
        '<br/>最小值：' +
        parm[0].data.value[1] +
        '<br/>最大值：' +
        parm[0].data.value[2] +
        '<br/>平均值：' +
        parm[1].data +
        '<br/>出现次数：' +
        parm[2].data
      return text
    }
  },
  legend: {
    data: ['当前值', '最大值', '最小值'],
    left: 'right',
    top: 'center',
    orient: 'vertical'
  },
  grid: [
    {
      left: 0,
      right: 100,
      bottom: 50,
      top: 10
    }
  ],
  yAxis: [
    {
      type: 'value',
      show: false,
      splitNumber: 2
    }
  ],
  xAxis: [
    {
      type: 'category',
      splitLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      axisLine: {
        show: false
      },
      axisLabel: {
        interval: 0, // 设置横坐标为斜
        rotate: 30 // 文字倾斜角度
      },
      data: []
    }
  ],
  series: [
    {
      type: 'k',
      barWidth: 30,
      markLine: {
        silent: true,
        lineStyle: {
          color: 'gray'
        },
        data: [
          {
            name: '3σ',
            yAxis: 1,
            label: {
              formatter: '{b}'
            }
          },
          {
            name: '3σ',
            yAxis: 0,
            label: {
              formatter: '{b}'
            }
          },
          {
            name: 'μ',
            yAxis: 0.5,
            label: {
              formatter: '{b}'
            }
          }
        ]
      },
      data: [],
      itemStyle: {
        color: 'transparent',
        borderWidth: 3,
        borderColor: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: '#156dff'
          },
          {
            offset: 1,
            color: '#00eaeb'
          }
        ]),
        shadowColor: 'blue',
        shadowBlur: 12,
        shadowOffsetX: 0,
        shadowOffsetY: 0
      }
    },
    {
      type: 'scatter',
      symbolSize: [25, 3],
      data: []
    },
    {
      name: '当前值',
      type: 'line',
      symbolSize: 5,
      data: []
    },
    {
      name: '最小值',
      type: 'line',
      symbolSize: 3,
      lineStyle: {
        color: 'orangered',
        width: 1,
        type: 'dashed'
      },
      data: []
    },
    {
      name: '最大值',
      type: 'line',
      symbolSize: 3,
      lineStyle: {
        color: 'orangered',
        width: 1,
        type: 'dashed'
      },
      data: []
    }
  ]
}
